<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    数据请求放在 created 与 mounted 的区别：

      主要在于是否需要让这个数据更早的展示在页面上。
        需要，created
        不需要，mounted

    在created中调用接口，接口完成之后，能否获取到最新的DOM?
        是可以的，接口是异步，等到异步完成，组件早已经挂载完成

   -->
    <div id="app">
      <p>{{ person.name }}</p>
      <p id="myP">{{ person.age }}</p>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            person: {
              name: "张三",
              age: 18,

              list: [],
            },
          };
        },
        created() {
          // 模拟调用接口
          setTimeout(() => {
            // 在这里，组件已经 mounted 完成了
            console.log("接口完成");
            this.person.name = "里斯";
            this.person.age = 20;

            // 为何是 18 而不是 20
            //    原因：数据的变化引起页面的更新操作是异步的过程
            console.log(document.querySelector("#myP").innerHTML); // 18

            this.$nextTick(() => {
              console.log(document.querySelector("#myP").innerHTML); // 20
            })
          }, 0);
        },

        mounted() {
          console.log("mounted");

          console.log(this.person.name); // '张三'
        },
      }).mount("#app");
    </script>
  </body>
</html>
